/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

.popup-reacted-list {
  --size: 1.5rem;
  --custom-emoji-size: var(--size);
  $parent: ".popup";

  #{$parent} {
    &-container {
      width: 25rem;
      height: 600px;
      max-height: 600px;
      padding: 0;
    }

    &-header {
      min-height: 3.5625rem;
      margin: 0;
      padding: .25rem .75rem .75rem;
      border-bottom: 1px solid var(--border-color);
    }

    &-close {
      margin-top: .375rem;
      margin-inline-end: .5rem;
      height: 40px;
      order: -1;
    }
  }

  .reaction {
    --reaction-size: var(--size);
    --additional-height: .75rem;
    --margin: .5rem;
    // --background-color: var(--secondary-color);
    --background-color: var(--light-filled-primary-color);
    --counter-color: var(--primary-color);
    flex: 1 0 auto;
    justify-content: space-evenly;

    &.is-chosen {
      &:not(.backwards) {
        // --counter-color: var(--primary-text-color);
        --counter-color: #fff;
      }
    }

    &-sticker-icon {
      font-size: 1.25rem !important;
      margin: 0;
      display: flex;
      align-items: center;
    }
  }

  .sidebar-left-section {
    margin-bottom: 0 !important;
  }

  /* .gradient-delimiter {
    flex: 0 0 auto;
  } */

  .tabs-container {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .tabs-tab {
    background-color: var(--surface-color);
  }

  .reacted-list {
    &-reaction-icon {
      display: flex;
      width: var(--size);
      height: var(--size);
      position: absolute;
      top: 50%;
      inset-inline-end: 1rem;
      transform: translateY(-50%);
    }

    &-checks {
      margin-inline-end: .25rem;
      font-size: 1.125rem;
    }
  }

  .chatlist-chat {
    padding-inline-end: 3.25rem !important;
  }
}
